<template>
  <view class="router-view">
    <uni-tab
      :tab-title="tabTitle"
      :has-active-border="true"
      @change="changeIndex"
    >
      <view slot="content">
        <view class="container" v-html="tabTitle[tabIndex].content"></view>
      </view>
    </uni-tab>
  </view>
</template>

<script>
import { infoProtocol } from "@/apis/app";
import uniTab from "@/components/tab";

export default {
  components: {
    uniTab,
  },

  data() {
    return {
      tabTitle: [
        {
          name: "常见问题",
          type: "problem",
          content: "",
        },
        {
          name: "账号问题",
          type: "account",
          content: "",
        },
        {
          name: "雇主帮助",
          type: "employer",
          content: "",
        },
        {
          name: "志华网",
          type: "zhihua",
          content: "",
        },
      ],
      tabIndex: 0,
    };
  },

  onLoad() {
    this.tabTitle.forEach((item, index) => {
      this.infoProtocol(item.type, index);
    });
  },

  methods: {
    changeIndex({ index, item }) {
      this.tabIndex = index;
    },

    /**
     * 获取协议内容
     */
    async infoProtocol(type, index) {
      let params = {
        type,
      };

      let { code, data } = await infoProtocol(params);

      if (code == 200) this.tabTitle[index].content = data.content;
    },
  },
};
</script>
